<template lang="html">
    <div class="container">
        <BaseTable ref="table" :needSearch="false" :cols="cols" @beforeCommit="beforeCommit" @handleAdd="handleAdd" :searchInfo="searchInfo" :apis='api' :editInfo="editInfo">
            <div slot="dialog">
                <Form :model="editInfo" ref="formCustom" :rules="ruleCustom" label-position="right" :label-width="100">
                    <FormItem label="类别名称" prop="markName">
                        <Input v-model="editInfo.markName"></Input>
                    </FormItem>
                    <FormItem label="类别介绍" prop="content">
                        <Input v-model="editInfo.content"></Input>
                    </FormItem>
                </Form>
            </div>
        </BaseTable>
    </div>
</template>

<script>
    import BaseTable from '@/components/tables/baseTable.vue';
    export default {
        components: {
            BaseTable
        },
        data() {
            return {
                searchInfo: {},
                editInfo: {},
                api: {
                    save: '/markLib/save',
                    remove: '/markLib/delete',
                    update: '/markLib/update',
                    list: '/markLib/list'
                },
                // 表单验证
                ruleCustom: {
                    markName: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                },
                cols: [{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                }, {
                    title: 'ID',
                    key: 'id'
                }, {
                    title: '类别名称',
                    key: 'markName'
                }, {
                    title: '类别介绍',
                    key: 'content'
                }, {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.handleEdit(params)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.handleRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }]
            }
        },
        methods: {
            beforeCommit(param) {
                this.$refs.formCustom.validate((valid) => {
                    if (valid) {
                        param.ok = true; // 允许提交
                    } else {
                        param.ok = false; // 允许提交
                    }
                });
            },
            handleEdit(param) {
                this.editInfo = JSON.parse(JSON.stringify(param.row));
                let params = {
                    needNew: false
                }
                this.$refs.table.handleEdit(params)
            },
            handleAdd() {
                let params = {
                    needNew : false
                } //不打开新页面
                this.editInfo = {};
                this.$refs.table.afterAdd(params)
            },
            handleRemove(params) {
                this.$refs.table.handleRemove(params.row.id, 'one')
            }
        },
    }
</script>

<style lang="less" scoped>
    .search-box {
        width: auto;
        float: left;
    }
</style>
